<template>
  <!-- 容器 -->
  <div ref="main" style="width: 100%; height: 50px"></div>
</template>

<script>
import { mapGetters } from "vuex";
import echarts from "echarts";
export default {
  name: "BarCharts",
  computed: {
    ...mapGetters("home", ["payTrend"]),
  },
  watch: {
    // 监听payTrend变化(从无到有)
    payTrend() {
      this.myCharts.setOption({
        // 数据配置项
        series: [
          {
            // 类型
            type: "bar",
            data: this.payTrend,
            color: "cyan",
          },
        ],
      });
    },
  },
  mounted() {
    // 初始化
    this.myCharts = echarts.init(this.$refs.main);
    // 配置
    this.myCharts.setOption({
      // x轴
      xAxis: {
        // 均分
        type: "category",
        // 隐藏x轴
        show: false,
      },
      // y轴
      yAxis: {
        // 隐藏y轴
        show: false,
      },
      // 数据配置项
      series: [
        {
          // 类型
          type: "bar",
          data: [],
          color: "cyan",
        },
      ],
      // 图形距离容器的距离配置
      grid: {
        left: 0,
        top: 5,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style>
</style>